<template>
	<view class="user-list">
		<!-- tabBar切换 -->
		<view class="swiper">
			<swiper-tab-header
				:tabBar="tabBar"
				:tabIndex="tabIndex"
				@tabtap="tabtap"
				scrollStyle="border-bottom:0;"
				scollItemStyle="width: 33%"
				tablineStyle="width:120upx"
			></swiper-tab-header>
		</view>
		<view class="uni-tab-bar tab">
			<swiper 
			:current="tabIndex" 
			class="swiper-box" 
			:style="{height: swiperHeight + 'px'}"
			@change="tabChange">
				<swiper-item v-for="(items, index1) in newslist" :key="index1">
					<scroll-view scroll-y="true" class="list" @scrolltolower="loadmore(index1)">
						<view class="user-list" v-if="items.list.length > 0">
							<!-- 图文列表 -->
							<block v-for="(item, index) in items.list" :key="index">
								<list :item="item" :index="index"></list>
							</block>
							<!-- 上拉刷新 -->
							<load-more v-show="items.list.length > 10" :loadtext="items.loadtext"></load-more>
						</view>
						<!-- 无内容默认 -->
						<no-thing :nothing="!items.list.length > 0"></no-thing>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import swiperTabHeader from '../../components/index/swiper-tab-header.vue';
import list from '../../components/user-list/list.vue';
import loadMore from '../../components/common/load-more.vue';
import noThing from '../../components/index/no-thing.vue';
export default {
	data() {
		return {
			tabIndex: 0,
			swiperHeight: 0,
			tabBar: [
				{
					name: '互关',
					id: 'huguan',
					num: 10
				},
				{
					name: '关注',
					id: 'guanzhu',
					num: 3
				},
				{
					name: '粉丝',
					id: 'fensi',
					num: 10
				}
			],
			newslist: [
				{
					loadtext:'上拉加载更多',
					list: [
						{
							userpic: '../../static/demo/userpic/1.jpg',
							username: '昵称',
							age: 20,
							sex: 1,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						}
					]
				},
				{
					loadtext:'上拉加载更多',
					list: [
						{
							userpic: '../../static/demo/userpic/1.jpg',
							username: '昵称',
							age: 20,
							sex: 1,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: true
						}
					]
				},
				{
					loadtext:'上拉加载更多',
					list: [
						{
							userpic: '../../static/demo/userpic/1.jpg',
							username: '昵称',
							age: 20,
							sex: 1,
							isguanzhu: false
						},
						{
							userpic: '../../static/demo/userpic/10.jpg',
							username: '脸腻味',
							age: 32,
							sex: 0,
							isguanzhu: false
						}
					]
				}
			]
			
		};
	},
	// 监听导航按钮事件
	onNavigationBarButtonTap(ev) {
		if (ev.index === 0) {
			uni.navigateBack({
				delta: 1
			});
		}
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.swiperHeight = res.screenHeight - uni.upx2px(250);
			}
		});
	},
	methods: {
		// tap点击事件
		tabtap(index) {
			this.tabIndex = index;
		},
		// 滑动事件
		tabChange(ev){
			this.tabIndex = ev.detail.current
		},
		loadmore(index){
			this.newslist[index].loadtext = "上拉加载更多";
			if(this.newslist[index].loadtext != "上拉加载更多"){
				return;
			}
			this.newslist[index].loadtext = "加载中...";
			uni.showLoading({
				title:"加载中...",
				mask:true,
				success: () => {
					let obj = {
							userpic: '../../static/demo/userpic/1.jpg',
							username: '昵称',
							age: 20,
							sex: 1,
							isguanzhu: true
						};
					setTimeout(() => {
						this.newslist[index].list.push(obj)
						uni.hideLoading()
						this.newslist[index].loadtext = "上拉加载更多"
					}, 1000);
				}
			})
		}
	},
	components: {
		swiperTabHeader,
		loadMore,
		noThing,
		list
	}
};
</script>

<style scoped lang="scss">
.user-list {
	width: 100%;
	.swiper{
		height: 100upx;
	}
}
</style>
